<template>
	<view class="assistantContent">
		<view class="upper">
			<CommonNavBar title="助手" :showBack="false" ></CommonNavBar>
		</view>
		<view class="centre">
			<view class="ul">
				<view class="li" v-for="(item, index) in assistantList" :key="item.id" @click="assistantListOpen(item.id)">
					<view class="left">
						<image :src="item.imageUrl" mode="aspectFill"></image>
						<view class="text">
							<view class="h1">{{ item.title }}</view>
							<view class="h2">{{ item.text }}</view>
						</view>
					</view>
					<view class="right">
						<view class="arrow"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CommonNavBar from '@/components/CommonNavBar.vue'
	export default {
		components: {
				CommonNavBar
		},
		data() {
			return { 
				assistantList: [{
					id: 1,
					title: '智能客服',
					text: '答疑解惑',
					imageUrl: '/static/img/assistantList1.png',
				},
				{
					id: 2,
					title: '文书模版',
					text: '制作文书',
					imageUrl: '/static/img/assistantList2.png',
					navigator:'/pages/assistant/docTemplateList'
				},
				{
					id: 3,
					title: '系统消息',
					text: '查看消息',
					imageUrl: '/static/img/assistantList3.png',
				}]
			}
		},
		methods: {
			assistantListOpen(id) {
				if(id === 1) {
					uni.navigateTo({
						url: '/pages/robot/robot'
					})
				}else if(id === 2) {
					uni.navigateTo({
						url: '/pages/assistant/docTemplateList'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.assistantContent {
		background: #F9F9F9;
		// height: calc(100vh - 195rpx);
	
		.upper {
			position: fixed;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;
	
			.title {
				background: url('../../static/img/inspectBg.png');
				background-size: cover;
				width: 100%;
				height: 115rpx;
				line-height: 115rpx;
				position: relative;
				display: flex;
				justify-content: center;
	
				text {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					letter-spacing: 1px;
				}
	
				.screen {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translate(0%, -50%);
					width: 35rpx;
					height: 33rpx;
				}
			}
		}
		
		.centre {
			margin: 115rpx 0 0 0;
			padding: 50rpx 17.5rpx 0 17.5rpx;
			height: calc(100vh - 165rpx);
			overflow-x: hidden;
			display: flex;
			flex-direction: column;
			
			.ul {
				
				.li {
					height: 132rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-shadow: 0rpx 4rpx 44rpx 0rpx rgba(0,0,0,0.1);
					border-radius: 15rpx;
					background: linear-gradient(270deg, #B3D3FF 0%, #FFFFFF 100%);
					
					.left {
						display: flex;
						align-items: center;
						
						image {
							width: 72rpx;
							height: 72rpx;
							margin: 0 20rpx 0 34rpx;
						}
						
						.text {
							
							.h1 {
								font-size: 29rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
							}
							
							.h2 {
								font-size: 20rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
							}
						}
					}
					
					.right {
						border-radius: 50%;
						width: 34rpx;
						height: 34rpx;
						background: #fff;
						margin: 0 35rpx 0 0;
						position: relative;

						.arrow {
							position: absolute;
							left: 46%;
							top: 50%;
							width: 10rpx;
							height: 10rpx;
							border-left: 2rpx solid #888;
							border-top: 2rpx solid #888;
							transform: translate(-50%, -50%) rotate(135deg);
						}
					}
					
					&:nth-child(2) {
						background: linear-gradient(90deg, #FFFFFF 0%, #D0EEF5 100%);
					}
					
					&:last-child {
						display: none;
						background: linear-gradient(270deg, #FFBDA4 0%, #FFFFFF 100%);
					}
					
					&+.li {
						margin: 20rpx auto 0;
					}
				}
			}
		}
	}
</style>